/*
 * @Author: yangzonglong
 * @Date: 2021-07-20 10:28:39
 * @version: v1.0.0
 * @Descripttion: mobile input
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-31 09:51:58
 * @Auditor:
 */
import React, { useState, useEffect, useRef } from 'react';
import JsBarcode from 'jsbarcode';

const QRCode = require('qrcode.react');

const App = (props,) => {

  const { formItemProps, initialValue, codeProps } = props;

  const [code, setCode] = useState(null);
  const [type, setType] = useState(null);

  const refs = useRef(null);

  useEffect(() => {
    if (!code || type !== 'barCode') return;
    JsBarcode(refs.current, code, {
      displayValue: false,
      width: 1.5,
      height: 50,
      margin: 0,
    });
  }, [code, type]);

  useEffect(() => {
    if (codeProps?.initialValue && !initialValue) setCode(codeProps.initialValue);
    if (codeProps?.type) setType(codeProps.type);
  }, [codeProps, initialValue]);

  useEffect(() => {
    if (initialValue) setCode(initialValue);
  }, [initialValue]);

  return (
    <div style={formItemProps?.style || {}}>
      {localStorage.i18nextLng === 'en' ? formItemProps?.labelEn : formItemProps?.label}
      <span>
        {
          code ? type === 'barCode' ? <div style={{ display: 'inline-block' }} ><svg ref={refs} />  </div> : <QRCode
            value={code}
            size={60}
          /> : null
        }
      </span>
    </div>
  );
};

export default App;
